<template>
  <div class="user-wrapper same-change-oldstyle">
    <div class="user-nav">
      <p>用户信息</p>
      <div class="user-nav-right">
        <el-button class="same-search-btns same-search-export" size="medium" @click="RefreshFun"> 刷新</el-button>
        <el-button class="same-search-btns" size="medium" @click="returnBack">返回</el-button>
      </div>
    </div>
    <div class="user-about">
      <div class="user-left">
        <div class="user-center">
          <div v-if='user.headimg'>
            <el-image :lazy="true" class="user-avatar" :src="user.headimg">
              <div slot="error" class="no-avatar">
                <i class="el-icon-picture"></i>
                <p>暂无头像</p>
              </div>
            </el-image>
          </div>
          <p class="user-name">
            {{ user.name || "--" }}
            <i v-if="user.sex == 1" class="el-icon-male"></i>
            <i v-if="user.sex == 2" class="el-icon-female"></i>
          </p>
        </div>
        <p class="user-id">ID：{{ user.user_no || "--" }}</p>
        <p class="user-phone">注册号码：{{ user.phone || "--" }}</p>
        <p class="user-idcard">身份证号：{{ user.IDcard || "--" }}</p>
      </div>
      <div class="user-right">
        <div class="icon-title">
          <i class="el-icon-postcard"></i>
          基本信息
        </div>
        <div class="user-base">
          <p>授权来源：{{ user.user_source }}授权</p>
          <p>所属运营者：{{ user.partner_name }}</p>
          <p>注册方式：{{ user.user_source }}</p>
          <p>注册时间：{{ user.add_time || "--" }}</p>
          <p>最后一次消费时间：{{ user.pay_time || "--" }}</p>
          <p>最后一次消费设备：{{ user.equipment_number | filtersCard }}</p>
        </div>

        <div class="icon-title m-t-50">
          <i class="el-icon-s-help"></i>
          平台信息
        </div>
        <div class="user-plat">
          <p>水卡数量：{{ user.card_count || 0 }}张</p>
          <p>积分数：{{ user.integral || 0 }}积分</p>
          <p>优惠券：{{ user.coupon_count || 0 }}张</p>
        </div>
      </div>
    </div>
    <div class="user-about">
      <div class="card-box">
        <div class="icon-title">
          <i class="el-icon-bank-card"></i>
          我的水卡
        </div>
        <div class="table_box">

          <div class="common-table-outer">
            <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
              :data="tableData" stripe>
              <el-table-column align="center" prop="id" label="水卡卡号">
                <template slot-scope="scope">
                  <!-- filtersCard -->
                  {{ scope.row.card  }}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="c_type" label="水卡类型">
              </el-table-column>
              <el-table-column align="center" label="余额(元）">
                <template slot-scope="scope">
                  {{ scope.row.balance | filterNumber }}元
                </template>
              </el-table-column>
              <el-table-column align="center" label="押金(元）">
                <template slot-scope="scope">
                  {{ scope.row.card_deposit | filterNumber }}元
                </template>
              </el-table-column>
              <el-table-column align="center" prop="card_tel" label="联系号码">
              </el-table-column>
              <el-table-column align="center" prop="bind_time" label="开卡时间">
              </el-table-column>
              <template slot="empty" v-if="isLoad">
                <div class="new-no-data-show">
                  <img src="../../assets/images/no-data.png" alt="">
                  <div>暂无相关数据</div>
                </div>
              </template>
            </el-table>

            <div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
              <el-pagination background class="pull-right clearfix" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page.sync="pageNo" :page-sizes="pageSizesList"
                :page-size="pageSize" layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "",
    data: function () {
      return {
        user: "",
        loading: true, // 加载动画
        isLoad: false, //是否请求接口
        tableData: [],
        pageNo: 1,
        pageSize: 15,
        pageSizesList: [15, 30, 40, 50],
        tableData: [], //返回的结果集合
        totalDataNumber: 0, //数据的总数,
      };
    }, //初始化执行
    created: function () {
      this.user_id = this.$route.query.user_id;
      // this.getWaterCard();
    },
    inject: [
      'reload'
    ],
    mounted() {
      this.getUser();
      var pageSize = this.pageSize; // 每页显示条数
      var page = this.pageNo; // 当前页
      this.userList(page, pageSize);
    },
    methods: {
      // 分页
      handleSizeChange(val) {
        var that = this;
        that.pageNo = 1;
        that.pageSize = val; // 当前每页显示条数
        that.userList(that.pageNo, val); // 获取
      },
      // 当前页
      handleCurrentChange(val) {
        var that = this;
        var pageSize = that.pageSize; // 每页条数
        that.pageNo = val;
        that.userList(val, pageSize); // 获取水卡消费记录
      },

      userList(page, pageSize) {
        var that = this;
        that.loading = true; //打开loading动画
        that.isLoad = false; //是否加载
        that.$post({
          url: "Partner/Users/userCard",
          data: {
            user_id: that.user_id,
            page: page,
            pageSize: pageSize,
            card_number: "",
          },
          success: (data) => {
            this.loading = false; //关闭动画
            this.isLoad = true;
            that.tableData = []; // 清空数据
            if (data.code == 1000) {
              $.each(data.data.list, function () {
                that.tableData.push(this);
              });
              that.totalDataNumber = data.data.count; // 总的数据
            } else {
              that.tableData = []; // 清空数据
            }
          },
        });
      },

      getUser() {
        this.$post({
          url: "Partner/Users/getUserinfo",
          data: {
            user_id: this.user_id,
          },
          success: (res) => {
            if (res.code > 0) {
              this.user = res.data;
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
            console.log(res);
          },
        });
      },

      jumpback() {
        this.$router.back(-1);
      },

      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload()
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
    },
  };
</script>

<style scoped>
  .user-wrapper {
    position: absolute;
    left: -15px;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #fafafa;
  }

  .user-nav {
    display: flex;
    background: #fff;
    height: 52px;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 40px 0;
  }

  .user-nav p {
    border-bottom: 2px #2d5686 solid;
    color: #2d5686;
    height: 100%;
    line-height: 52px;
    font-weight: 400;
  }

  .user-about {
    padding: 20px 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .user-about p {
    color: #4d4d4d;
  }

  .user-left {
    width: 330px;
    height: 400px;
    background: #fff;
    margin-right: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 30px 30px 0px 30px;
  }

  .user-right {
    flex: 1;
    background: #fff;
    height: 400px;
    border-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
  }

  .user-center {
    text-align: center;
  }

  .user-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 10px rgba(44, 86, 134, 0.1) solid;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .user-avatar i {
    font-size: 25px;
    color: #ccc;
  }

  .user-avatar p {
    margin-top: 5px;
    color: #ccc;
  }

  .user-name {
    margin-top: 5px;
    color: #2d5686 !important;
    font-weight: bold;
    font-size: 20px;
  }

  .user-name i {
    color: #f4a44e;
  }

  .user-id {
    margin-top: 35px;
  }

  .user-phone,
  .user-idcard {
    margin-top: 20px;
  }

  .icon-title {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #2d5686;
    position: relative;
  }

  .icon-title::after {
    content: "";
    position: absolute;
    bottom: -12px;
    width: 100%;
    border-bottom: 1px dotted #f3f3f3;
  }

  .icon-title i {
    font-size: 22px;
    margin-right: 6px;
  }

  .user-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 40px;
  }

  .user-base p {
    margin-bottom: 15px;
  }

  @media screen and (min-width: 1200px) and (max-width: 1920px) {
    .user-base p {
      width: 33.33%;
    }
  }

  @media screen and (min-width: 920px) and (max-width: 1600px) {
    .user-base p {
      width: 50%;
    }
  }

  .m-t-50 {
    margin-top: 50px;
  }

  .user-plat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
  }

  .user-plat p {
    width: 33.33%;
  }

  .card-box {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
  }

  .table_box {
    margin-top: 10px;
  }

  .no-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pull-right {
    float: right;
    margin-right: -20px;
    margin-top: 10px;
  }

  .btn-class:hover,
  .btn:active {
    background: #2C5586;
    color: #fff;
  }
</style>